<template>
  <div>
    <div style="font-size: 20px;">
      用户名：{{ tableData.userName }}
    </div>
    <br />
    <div style="font-size: 20px;">
      性别：{{ tableData.userSex==true?'男':'女' }}
    </div>
    <br />
    <div style="font-size: 20px;">
      姓名：{{ tableData.userMyName }}
    </div>
    <br />
    <div style="font-size: 20px;">
      证件类型：
      {{ tableData.idCarId==1?'身份证':'护照' }}
    </div>
    <br />
    <div style="font-size: 20px;">
      证件号码：{{ tableData.userIDCard }}
    </div>
    <br />
    <div style="font-size: 20px;">
      手机号码：{{ tableData.userPhone }}
    </div>
    <br />
    <div style="font-size: 20px;">
      电子邮箱：{{ tableData.userElect }}
    </div>
    <br />
    <div style="margin-left: 40%;">
      <el-button type="primary" style="width: 120px;">修改</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

// do not use same name with ref
const form = reactive({
  userId: "",
  userName: "",
  userPwd: "",
  userMyName: "",
  userSex: true,
  idCarId: "",
  userIDCard: "",
  userPhone: "",
  userElect: "",
});

//证件类型列表
const idCardsList = ref([]);
const GetidCard = () => {
  axios.post(apiUrl+"/api/Users/GetIDCards", {}).then((res) => {
    console.log("证件类型", res.data.data);
    idCardsList.value = res.data.data;
  });
};

const tableData = ref([]);
//角色显示
const getData = () => {
  axios
    .post(apiUrl+"/api/Roles/SearchUsers", {
      userId: localStorage.getItem("userId"),
    })
    .then((res) => {
      console.log(res.data);
      tableData.value = res.data.data;
    });
};

onMounted(() => {
  GetidCard(); //证件类型
  getData();
});
</script>

<style scoped></style>
